<template>

  <Dialog :fullscreen="false" width="500px"  title="" v-model="dialogVisible">

      <div class="dialog-title-container">
        <div class="title-box">
          <span>{{dialogTitle}}指标要求</span>
        </div>
      
      </div>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
 
      <el-form-item label="型号" prop="modelNumber">
        <el-input v-model="formData.modelNumber" placeholder="请输入型号"   class="!w-220px"/>
      </el-form-item>
      <el-form-item label="检验项目" prop="checkProject">
        <el-input v-model="formData.checkProject" placeholder="请输入检验项目"  class="!w-220px"/>
      </el-form-item>
      <el-form-item label="指标要求" prop="require" >
        <el-input v-model="formData.require" placeholder="请输入指标要求"  class="!w-220px"/>
        <!-- <el-select v-model="formData.type" placeholder="" class="!w-220px">
          <el-option label="有效" value="0" />
          <el-option label="废止" value="1" />
          <el-option label="被替代" value="2" />
        </el-select> -->
      </el-form-item>


      <el-form-item label="检验方法" prop="checkMethod">
        <el-input v-model="formData.checkMethod" placeholder="请输入检验方法"  class="!w-220px" />
      </el-form-item>

    </el-form>
    <div class="flex justify-end">
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button  @click="dialogVisible = false">返回</el-button>
    </div>


  </Dialog>
</template>
<script setup lang="ts">
import { StandardMaintainApi, StandardMaintainVO } from '@/api/qis/standardmaintain'

/** 质检平台-标准维护 表单 */
defineOptions({ name: 'StandardMaintainForm' })

const props = defineProps({
  createId:{
    type:Number,
    default:0
  }
})

console.log(props.createId)



console.log(props.data)

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({

})
const formRules = reactive({
  modelNumber: [{ required: true, message: '型号不能为空', trigger: 'blur' },{
    max:50,message: '长度不能超过50个字符', trigger: 'blur'
  }],
  checkProject: [{ required: true, message: '检验项目不能为空', trigger: 'blur' },
  {
    max:50,message: '长度不能超过50个字符', trigger: 'blur'
  }
  ],
  require:[{max:50,message: '长度不能超过50个字符', trigger: 'blur' }],
  checkMethod:[{max:50,message: '长度不能超过50个字符', trigger: 'blur' }],

  // type: [{ required: true, message: '标准分类: 0-国家标准 1-行业标准 2-中国石油企业标准不能为空', trigger: 'change' }],
  // publishDate: [{ required: true, message: '发布日期不能为空', trigger: 'blur' }],
  // implementDate: [{ required: true, message: '执行日期不能为空', trigger: 'blur' }],
  // publishCompany: [{ required: true, message: '发布单位不能为空', trigger: 'blur' }],
  // state: [{ required: true, message: '标准状态：0-有效 1-废止 2-被替代不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    console.log(id,'asdfh;jsdlkfasd; f')
    formLoading.value = true
    try {
      const data = await StandardMaintainApi.getStandardTargetById(id)
      console.log('API返回数据:', data) // 调试日志
      formData.value = data
    
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success',]) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {

  if(!formRef.value) return 
  await formRef.value.validate(async (valid)=>{
      if(valid){
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as StandardMaintainVO
    data.standardMaintainId = props.createId
    if (formType.value === 'create') {
      await StandardMaintainApi.createStandardTarget(data)
      message.success(t('common.createSuccess'))
    } else {
      await StandardMaintainApi.updateStandardTarget(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
      }
  })

}







/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    num: undefined,
    name: undefined,
    type: undefined,
    publishDate: undefined,
    implementDate: undefined,
    publishCompany: undefined,
    state: undefined,
  }
  formRef.value?.resetFields()
}

const handleSelect = (row: any) => {
  console.log(row)
}

const tableData = ref([])
</script>

<style lang="scss" scoped>
  .dialog-title-container{
    display:flex;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;

    span{
      font-size: 18px;
      font-weight: bold;
    }
  }


 .dialog-from{
  margin: 20px;
 }

 .title-box{
  margin-bottom: 50px;
 }
</style>